<#include "../../layout.ftl">
<@title>
    <title>菜单管理</title>
</@title>
<@css>

</@css>
<@layout>
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="menu-form">
                    <div class="select-list">
                        <ul>
                            <li>
                                菜单名称：<input type="text" name="menu_name"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick=""><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick=""><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" role="group" id="toolbar">
                <a class="btn btn-success" onclick="add();" data-role="admin:menu:add">
                    <i class="fa fa-plus"></i> 新增
                </a>
                <a class="btn btn-danger" onclick="removeAll(this);" data-id="0" data-role="admin.menu.delete">
                    <i class="fa fa-remove"></i> 删除
                </a>
                <a class="btn btn-info"  onclick="expandAll();" data-role="0">
                    <i class="fa fa-exchange"></i> 展开/折叠
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="dataTable"></table>
            </div>
        </div>
    </div>
</@layout>

<@js>

    <script layout:fragment="script">
        let $table;
        $(function () {
            jutils.handleMessage(function(res){
                //console.log(res);
                if(res.title==='menuForm'){
                    // $("#dataTable").bootstrapTreeTable("refresh");
                    $table.easyTreeTable('search');
                }

            });
            loadData();

        });

        function loadData() {
            var options = {
                id:'dataTable',
                url: '/admin/sysmenu/getMenuList',
                code: "id",
                parentCode: "parentId",
                uniqueId: "id",
                toolbar: '#toolbar',
                rootIdValue: 0,
                striped: false,
                expandColumn: 1,
                showSearch: true,
                showRefresh: true,
                showColumns: true,
                expandAll: true,
                expandFirst: true,
                method:'post',
                columns: [
                    {field: 'selectItem', checkbox: true},
                    {
                        field: 'menuName', title: '菜单名称', formatter: function (v, r, i) {
                            return '<i class="' + r.menuIcon + '"></i>' + v;
                        }
                    },
                    {field: 'menuUrl', title: '路由', align: "left"},
                    {field: 'roleTag', title: '权限标识', align: "left"},
                    {field: 'menuSort', title: '排序', align: "left"},
                    {field: 'createTime', title: '创建时间', align: "left"},
                    {
                        field: 'id',title: '操作', align: "center", formatter: renderOperationButton
                    }
                ],
                onLoadSuccess: function (data) {
                    // console.log('from data load ok');
                    // console.log(data);
                }
            }

            //$table = $.treeTable.init(options);
            $table = $("#dataTable").easyTreeTable(options);
        }


        function renderOperationButton(value, row, index) {
            var actions = [];
            actions.push({
                roleTag:'system:menu:edit',
                button:'<a class="btn btn-success btn-xs" href="javascript:void(0);" onclick="edit(this);" data-id="' + value + '"><i class="fa fa-edit"></i>编辑</a>'
            });
            actions.push({
                roleTag:'system:menu:delete',
                button:'<a class="btn btn-danger btn-xs" href="javascript:void(0);" onclick="del(this);" data-id="' + value + '"><i class="fa fa-trash"></i>删除</a>'
            });

            return jutils.buttonPermission(actions);
        }

        function add(){
            // jutils.dialogFull("添加菜单",'/admin/sysmenu/form',{id:0},function(){
            //       console.log('回调');
            // });
            jutils.openTab('menuForm','添加菜单','/admin/sysmenu/form');
        }

        function edit(obj) {
            var dataId = $(obj).data('id');
            jutils.openTab('menuForm','修改菜单','/admin/sysmenu/form?id='+dataId);
            //console.log("from edit", dataId);
        }

        function removeAll(obj) {
            const rows = $table.easyTreeTable("selected");
            if (rows.length === 0) {
                jutils.warn("请选择数据行");
                return;
            }
            let ids=[];
            for (let i = 0; i < rows.length; i++) {
                ids.push(rows[i].id);
            }

            jutils.confirm("删除菜单信息可能会影响角色权限，确认删除吗？",function(){
                jutils.ajaxGet('/admin/sysmenu/removeAll',{ids: ids.join()},function (res){
                    //$table.bootstrapTreeTable('refresh');
                    $table.easyTreeTable('search');
                });
            });

        }

        function del(obj) {
            var dataId = $(obj).data('id');
            jutils.confirm("删除菜单信息可能会影响角色权限，确认删除吗？",function(){
                jutils.ajaxGet('/admin/sysmenu/removeAll',{ids:dataId},function (res){
                    //$table.bootstrapTreeTable('refresh');
                    $table.easyTreeTable('search');
                });
            });

        }
        function expandAll(){
            $table.easyTreeTable('expandAll');
        }


    </script>
</@js>
